<!--
 * 功能： banner多图滚动组件
 * 作者： caihan
 * 日期:  2021-8-13 4:30:00 ?F10: PM?
 -->
<template>
	<view>
		<!-- 多图滚动 -->
		<swiper class="card-swiper" @change="change" :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item v-for="(item, index) in list" :key="index">
				<view class="image-style" @click.stop="onClickItem(item)">
					<image class="image-style" :src="item.imagePath" mode="scaleToFill"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name: "banner-list",
		components: {},
		data() {
			return {
				autoplay: true,
				interval: 2000,
				duration: 500,
				currentNum: 0,
			}
		},
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
		},
		computed: {
			//计算属性
		},
		watch: {},
		mounted() {
			//挂载到实例上去之后调用
			this.$nextTick(() => {
				// Code that will run only after the
				// entire view has been rendered
			})
		},
		created() {
			//在实例创建完成后被立即调用
		},
		methods: {
			change: function(e) {
				this.currentNum = e.detail.current;
			},
			onClickItem: function(item) {
				// {
				//     "desc": "扔物线",
				//     "id": 29,
				//     "imagePath": "https://wanandroid.com/blogimgs/18320a47-148a-4f8e-bf1a-71e633872dcf.png",
				//     "isVisible": 1,
				//     "order": 0,
				//     "title": "Android 面试黑洞&mdash;&mdash;当我按下 Home 键再切回来，会发生什么？",
				//     "type": 0,
				//     "url": "https://www.bilibili.com/video/BV1CA41177Se"
				//   }
				this.$navTo(`/packages/article/article-detail?url=${encodeURIComponent(item.url)}`);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card-swiper {
		width: 750rpx;
		height: 300rpx;
	}

	.image-style {
		width: 750rpx;
		height: 300rpx;
		border-radius: 10rpx;
	}
</style>
